<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog system-user-dialog"
      :custom-class="'panna-dialog_big'"
      :append-to-body="true"
      :title="dataList.MainTaskInfo"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <div>
        <el-divider class="el-divider-specail" content-position="left"
          ><span>{{ dataList.MainEquip }}</span>
          <el-button
            type="primary"
            style="margin-left: 20px"
            @click="choiceDevice"
            >{{ dataList.SelectDevice }}</el-button
          >
        </el-divider>
        <el-table
          :data="list"
          element-loading-text="Loading"
          fit
          highlight-current-row
        >
          >
          <el-table-column :label="dataList.DeviceNumber">
            <template slot-scope="scope">
              {{ scope.row.num }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
            "
          >
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DeviceSpecifications">
            <template slot-scope="scope">
              {{ scope.row.specifications }}
            </template>
          </el-table-column>

          <el-table-column :label="dataList.DeviceClassifyId">
            <template slot-scope="scope">
              {{ scope.row.classifyName }}
            </template>
          </el-table-column>

          <el-table-column :label="dataList.DeviceSupplierName">
            <template slot-scope="scope">
              {{ scope.row.supplierName }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DeviceFactoryNum">
            <template slot-scope="scope">
              {{ scope.row.factoryNum }}
            </template>
          </el-table-column>

          <el-table-column :label="dataList.DeviceStatus">
            <template slot-scope="scope">
              {{ scope.row.statusName }}
            </template>
          </el-table-column>
          <el-table-column
            :label="
              $i18n.locale === 'en'
                ? dataList.eDeviceStorageAddress
                : dataList.DeviceStorageAddress
            "
          >
            <template slot-scope="scope">
              {{ scope.row.storageAddress }}
            </template>
          </el-table-column>
          <el-table-column :label="dataList.DevicePersonResponsibleId">
            <template slot-scope="scope">
              {{ scope.row.personResponsibleName }}
            </template>
          </el-table-column>

          <el-table-column :label="dataList.Operation">
            <template slot-scope="scope">
              <div class="base-table-operation">
                <el-link
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index)"
                  >{{ btn.Delete }}</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-divider class="el-divider-specail" content-position="left"
          ><span>{{ dataList.InspectionPlan }}</span>
        </el-divider>
        <el-form
          ref="formData"
          class="base-pipeline-layout system-user-form"
          :label-width="$i18n.locale === 'en' ? '200px' : '100px'"
          :model="formData"
          :rules="formDataRules"
          status-icon
        >
          <el-form-item
            :label="dataList.MaintenancePersonnel"
            prop="maintenancePersonId"
            :error="errorMsg.maintenancePersonId"
          >
            <UserDropDownList
              :value="formData.maintenancePersonId"
              @input="borrowPersonChange"
            />
          </el-form-item>
          <el-form-item
            :label="dataList.ScheduledMaintenanceTime"
            prop="planDate"
            :error="errorMsg.planDate"
          >
            <el-date-picker
              v-model="formData.planDate"
              type="date"
              :placeholder="dataList.SelectDateTime"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            :label="dataList.MaintenanceTask"
            prop="project"
            :error="errorMsg.project"
          >
            <el-input v-model="formData.project" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="onSubmit('formData')">{{
          btn.Save
        }}</el-button>
        <el-button @click="cancel">{{ btn.Cancel }}</el-button>
      </div>
    </el-dialog>
    <DeviceDialogList
      v-if="choiceDeviceVisible"
      :dialog-form-visible.sync="choiceDeviceVisible"
      :choice-device-num.sync="choiceDeviceNum"
      :not-display-text.sync="notDisplayText"
      @checkedRowsFun="closeChoiceDevice"
    />
  </div>
</template>

<script>
import { create, update } from "../../../api/DeviceMaintenanceTask.js";
import DeviceDialogList from "../../../components/DeviceDialogList.vue";
import UserDropDownList from "../../../components/UserDropDownList.vue";
export default {
  name: "DeviceMaintenanceTaskAddDialog",
  components: { DeviceDialogList, UserDropDownList },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: [],
      choiceDeviceNum: 1,
      choiceDeviceVisible: false,
      notDisplayText: [this.$t("ModuleDevice.Device.Scrap")],
      loading: false,
      innerDialogFormVisible: false,
      formLabelWidth: "100px",
      initData: {
        id: 0,
        num: "",
        deviceId: 0,
        maintenanceId: 0,
        type: 0,
        typeName: "",
        project: "",
        planDate: new Date(),
        maintenanceDate: 0,
        maintenancePersonId: "",
        maintenancePersonName: "",
        maintenanceStatus: 0,
        maintenanceStatusName: "",
        remark: "",
      },
      formData: {
        id: 0,
        num: "",
        deviceId: 0,
        maintenanceId: 0,
        type: 0,
        typeName: "",
        project: "",
        planDate: new Date(),

        maintenancePersonId: "",
        maintenancePersonName: "",
        maintenanceStatus: 0,
        maintenanceStatusName: "",
        remark: "",
      },
      formDataRules: {
        num: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        deviceId: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        maintenanceId: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        type: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        typeName: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        project: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        planDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        status: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        statusName: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        maintenanceDate: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        maintenancePersonId: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        maintenancePersonName: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        maintenanceStatus: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunctionPositiveNumber,
          },
        ],
        maintenanceStatusName: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
        remark: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
        ],
      },
      initErrorMsg: {
        num: "",
        deviceId: "",
        maintenanceNum: "",
        type: "",
        typeName: "",
        project: "",
        planDate: "",
        status: "",
        statusName: "",
        maintenanceDate: "",
        maintenancePersonId: "",
        maintenancePersonName: "",
        maintenanceStatus: "",
        maintenanceStatusName: "",
        remark: "",
      },
      errorMsg: {
        num: "",
        deviceId: "",
        maintenanceNum: "",
        type: "",
        typeName: "",
        project: "",
        planDate: "",
        status: "",
        statusName: "",
        maintenanceDate: "",
        maintenancePersonId: "",
        maintenancePersonName: "",
        maintenanceStatus: "",
        maintenanceStatusName: "",
        remark: "",
      },
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
  },
  methods: {
    borrowPersonChange(val) {
      this.formData.maintenancePersonId = val;
    },
    handleDelete(index) {
      this.list.splice(index, 1);
      this.formData.maintenancePersonId = null;
    },
    // 关闭选择设备弹框
    closeChoiceDevice(data) {
      if (data != null && data.length !== 0) {
        this.formData.maintenancePersonId = data[0].personResponsibleId;
        this.formData.deviceId = data[0].id;
      } else {
        this.formData.maintenancePersonId = null;
      }

      this.list = data;
    },
    // 选择设备
    choiceDevice() {
      this.choiceDeviceVisible = true;
    },
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    onSubmit() {
      if (this.list == null || this.list.length <= 0) {
        this.$message.warning(
          this.$i18n.t("ModuleDevice.Message.LeastSelectEquip")
        );
        return;
      }
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.errorMsg = this.Helper.deepCopy(this.initErrorMsg);
          if (this.formData.id <= 0) {
            create(this.formData)
              .then((res) => {
                if (res.code === 200) {
                  this.closeDialog();
                } else {
                  this.showValidateMsgCheck(res);
                }
                this.loading = false;
              })
              .catch(() => {
                this.loading = false;
              });
          } else {
            update(this.formData)
              .then((res) => {
                if (res.code === 200) {
                  this.closeDialog();
                } else {
                  this.showValidateMsgCheck(res);
                }
                this.loading = false;
              })
              .catch(() => {
                this.loading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    showValidateMsgCheck(res) {
      if (res.msg) {
        this.Helper.showValidateMsg("num", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("deviceNum", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("maintenanceNum", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("type", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("typeName", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("project", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("planDate", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("status", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("statusName", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("maintenanceDate", this.errorMsg, res.msg);
        this.Helper.showValidateMsg(
          "maintenancePersonId",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg(
          "maintenancePersonName",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg(
          "maintenanceStatus",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg(
          "maintenanceStatusName",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg("remark", this.errorMsg, res.msg);
      }
    },
  },
};
</script>
